<template>
    <div style="margin-top: 60px; margin-left: 80px;">
        <!-- 筛选条件 -->
        <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item label="关键字：" prop="keyWord">
                <el-input v-model="keyWord" placeholder="请输入关键字" style="width: 230px; float: left" />
                <span style="margin-left:30px;">条件查询：</span>
                <el-select v-model="type" style="margin-left:30px; width: 230px;" >
                    <el-option label="姓名" value="username" />
                    <el-option label="年龄" value="age" />
                    <el-option label="性别" value="gender" />
                </el-select>
                <el-button type="primary" icon="Search" style="margin-left: 30px" @click="search">
                    搜索
                </el-button>
                <el-button type="success" icon="Plus" style="margin-left: 30px" @click="add">
                    添加管理员
                </el-button>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column prop="id" label="编号" width="125" />
            <el-table-column prop="name" label="姓名" width="160" />
            <el-table-column prop="username" label="用户名" width="160" />
            <el-table-column prop="password" label="密码" width="160" />
            <el-table-column prop="age" label="年龄" width="125" />
            <el-table-column prop="gender" label="性别" width="125" />
            <el-table-column prop="address" label="地址" width="160" />
            <el-table-column label="操作" width="180">
                <template #default="{ row }">
                    <el-button size="small" @click="edit(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="del(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination style="margin-top: 20px; float: right" background layout="prev, pager, next"
            :page-size="pageSize" :total="total" :current-page="currentPage" @current-change="page" />

        <!-- 添加管理员 -->
        <el-dialog title="添加管理员" v-model="dialogTableVisible" width="30%">
            <el-form :model="addAdmin" label-width="auto">
                <el-form-item label="姓名"><el-input v-model="addAdmin.name" /></el-form-item>
                <el-form-item label="用户名"><el-input v-model="addAdmin.username" /></el-form-item>
                <el-form-item label="密码"><el-input v-model="addAdmin.password" /></el-form-item>
                <el-form-item label="年龄"><el-input v-model="addAdmin.age" /></el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="addAdmin.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址"><el-input v-model="addAdmin.address" /></el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addClick">添加</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改管理员 -->
        <el-dialog title="修改管理员" v-model="dialogTableVisible2" width="30%">
            <el-form :model="updateAdmin" label-width="auto">
                <el-form-item label="ID"><el-input v-model="updateAdmin.id" readonly /></el-form-item>
                <el-form-item label="姓名"><el-input v-model="updateAdmin.name" /></el-form-item>
                <el-form-item label="用户名"><el-input v-model="updateAdmin.username" /></el-form-item>
                <el-form-item label="密码"><el-input v-model="updateAdmin.password" /></el-form-item>
                <el-form-item label="年龄"><el-input v-model="updateAdmin.age" /></el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="updateAdmin.gender">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="地址"><el-input v-model="updateAdmin.address" /></el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateClick">修改</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'

// 表格和分页数据
const tableData = ref([])
const pageSize = ref(5)
const total = ref(0)
const currentPage = ref(1)

// 搜索参数
const keyWord = ref('')
const type = ref('username')

// 添加 / 修改对话框显隐
const dialogTableVisible = ref(false)
const dialogTableVisible2 = ref(false)

// 添加管理员数据
const addAdmin = ref({
    name: '',
    username: '',
    password: '',
    age: '',
    gender: '',
    address: ''
})

// 修改管理员数据
const updateAdmin = ref({
    id: '',
    name: '',
    username: '',
    password: '',
    age: '',
    gender: '',
    address: ''
})

// 加载分页数据
const page = (pageNum) => {
    axios.get(`http://localhost:8181/admin/list?page=${pageNum}&size=${pageSize.value}`).then((res) => {
        tableData.value = res.data.data
        pageSize.value = res.data.size
        total.value = res.data.total
        currentPage.value = pageNum
    })
}

// 初始化加载第一页
onMounted(() => page(1))

// 打开添加弹窗
const add = () => {
    dialogTableVisible.value = true
}

// 编辑
const edit = (row) => {
    updateAdmin.value = { ...row }
    dialogTableVisible2.value = true
}

// 添加提交
const addClick = () => {
    axios.post('http://localhost:8181/admin/add', addAdmin.value).then((res) => {
        if (res.data === true) {
            ElMessageBox.alert(`管理员【${addAdmin.value.name}】添加成功`, '', {
                confirmButtonText: '确定',
                callback: () => location.reload()
            })
        }
    })
}

// 修改提交
const updateClick = () => {
    axios.put('http://localhost:8181/admin/update', updateAdmin.value).then((res) => {
        if (res.data === true) {
            ElMessageBox.alert(`管理员【${updateAdmin.value.name}】修改成功`, '', {
                confirmButtonText: '确定',
                callback: () => location.reload()
            })
        }
    })
}

// 删除
const del = (row) => {
    ElMessageBox.confirm(`确认删除管理员【${row.name}】吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        axios.delete(`http://localhost:8181/admin/delete/${row.id}`).then((res) => {
            if (res.data === true) {
                ElMessageBox.alert(`管理员【${row.name}】已删除`, '', {
                    confirmButtonText: '确定',
                    callback: () => location.reload()
                })
            }
        })
    })
}

// 搜索
const search = () => {
    currentPage.value = 1
    axios
        .get(
            `http://localhost:8181/admin/list?page=1&size=${pageSize.value}&keyWord=${keyWord.value}&type=${type.value}`
        )
        .then((res) => {
            tableData.value = res.data.data
            pageSize.value = res.data.size
            total.value = res.data.total
        })
}
</script>

<style scoped>
.demo-ruleForm {
    background-color: #f9f9f9;
    padding: 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

/* 表单项间距 */
.demo-ruleForm .el-form-item {
    margin-bottom: 20px;
}

/* 输入框宽度统一（你已设置230px，但这里可做响应式控制） */
.demo-ruleForm .el-input {
    width: 100%;
}

/* 查询按钮样式增强 */
.demo-ruleForm .el-button {
    margin-left: 16px;
}

/* 关键字输入框居中对齐优化 */
.demo-ruleForm .el-input:first-child {
    margin-right: 16px;
}

/* 条件选择器（el-select）间距微调 */
.demo-ruleForm .el-select {
    margin-left: 8px;
}
</style>
